<template>
  <div class="cesium-view-details" :style="{ right: cesiumWidth + 'px' }">
    <div class="left-info-box" v-if="cesiumWidth <= 500">
      <div />
      <div class="mars3d-distance-legend">
        <div class="legend-label">200km</div>
        <div class="legend-scale-bar" />
      </div>
      <div />
    </div>
    <div class="center-info-box">
      {{ projectInfo.name }}
    </div>
    <div class="right-info-box" v-if="cesiumWidth <= 500">
      <div class="info-item">
        <label>经度</label>
        <span>{{
          baseCesiumInfo.lon ? baseCesiumInfo.lon.toFixed(8) : ""
        }}</span>
      </div>
      <div class="info-item">
        <label>纬度</label>
        <span>{{
          baseCesiumInfo.lat ? baseCesiumInfo.lat.toFixed(8) : ""
        }}</span>
      </div>
      <!-- <div class="info-item">
        <label>海拔</label>
        <span>{{ baseCesiumInfo.height / 1000 }}</span>
      </div> -->
      <!-- <div class="info-item">
        <label>层级</label>
        <span>11.2323</span>
      </div>
       -->
      <!-- <div class="info-item">
        <label>俯仰角</label>
        <span>{{ baseCesiumInfo.heading }}</span>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "CesiumViewDetails",
  props: {
    cesiumWidth: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    baseCesiumInfo() {
      return this.$store.getters.baseCesiumInfo;
    },
    projectInfo() {
      return this.$store.getters.proInfo;
    },
  },
};
</script>

<style  lang="scss" scoped>
.cesium-view-details {
  position: fixed;
  bottom: 1px !important;
  left: 0px;
  right: 600px;
  height: 28px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 10px;
  color: #fff;
  font-size: 13px;
  text-shadow: 2px 2px 2px #000;
  background-color: rgba(0, 0, 0, 0.4);
  & > div {
    flex: 0.3;
    text-align: center;
  }
  .left-info-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .mars3d-distance-legend {
      width: 125px;
      height: 25px;
      pointer-events: none;
      user-select: none;
      .legend-label {
        font-size: 13px;
        color: #fff;
        text-align: center;
        width: 100%;
        // bottom: 2px;
        // left: 100px;
        visibility: visible;
      }
      .legend-scale-bar {
        width: 84px;
        margin-left: 20px;
        height: 10px;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
      }
    }
  }
  .right-info-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    & > div {
      margin-right: 10px;
      max-width: 160px;
      text-align: center;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      & > label {
        width: 40px;
        overflow: hidden;
      }
      & > span {
        display: inline-block;
        width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
